<template>
  <div class="like">
    <div class="header">
      <span class="iconfont">&#xe601;</span>
      <span class="title">猜你喜欢</span>
    </div>
    <div class="main">
      <ul>
        <li class="item border-bottom" :key="item.index" v-for="item in items">
          <div class="left">
            <img :src="item.image" />
            <span>{{item.service}}</span>
          </div>
          <div class="right">
            <div class="title">{{item.title}}</div>
            <div class="evaluation">
              <span class="iconfont" v-for="star in item.star">&#xe600;</span><span class="mp-comment-num"> {{item.evaluationCount}}条评论</span>
            </div>
            <div class="price-and-location">
              <div class="price"><span class="sp">￥{{item.price}}</span><span>起</span></div>
              <div class="location">{{item.location}}</div>
              <div class="ps">{{item.ps}}</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default{
  props: ['items'],
  name: 'IndexLike'
}
</script>
<style lang="stylus" scoped="">
  .like
    background-color: #ffffff
    padding: .3rem
    >.header
      .iconfont
        color: #ff6053;
      .title
        display: inline-block
        height: 0.44rem;
        color: #212121;
        font-size: 0.32rem;
        line-height: 0.44rem
    .main
      ul
        overflow: auto
        .item

          padding-top: .2rem
          padding-bottom: .2rem
          .left
            position: relative
            float: left
            width: 2rem
            img
              width: 100%
              height: 100%
            span
              padding: .05rem
              position: absolute
              background-color: #ff8f09
              display: block;
              width: 1rem;
              font-size: .2rem;
              border-radius: 0.05rem;
              color: #fff;
              top: 0
          .right
            overflow: hidden;
            padding-left: .6em
            .title
              margin-top  .4rem
              color: #212121;
              font-size: .32rem
            .evaluation
              .iconfont
                color: #ffb436
              margin-top: .2rem
              .mp-comment-num
                color: #616161;
                font-size: .24rem;
                line-height: .34rem;
            .price-and-location
              margin-top: .2rem
              .price
                float: left
                .sp
                  font-size: .4rem;
                  color: #ff8300;
              .location
                position: relative;
                margin-top: .22rem;
                color: #616161;
                font-size: .24rem;
                line-height: .4rem;
                float: right
            .ps
              clear: both
              color: #f55;
              font-size: .24rem;
              line-height: .34rem;
              hidden()
</style>
